<template>
	<view class="base-mine">
		<view class="mine">
			<rich-text :nodes="agreementsContent"></rich-text>
		</view>
	</view>
</template>

<script>
	import Common from "@/api/common.js"
	export default {
		data() {
			return {
				agreementsContent: '',
				id: ''
			}
		},
		props: {
			// agreementsContent: {
			// 	type: Array,
			// 	default: ''
			// }
		},
		onLoad(options) {
			this.id = options.id
			this.getAgreements()
		},
		methods: {
			formatterImage(data) {
				if(data == "") return "";
				var jsonDa = JSON.stringify(data).replace(/<img/gi, "<img class='richImg'style='width:100%!important;height:auto!important;max-height:100%;'");
				var newResData = JSON.parse(jsonDa);
				return newResData;
			},
			async getAgreements() {
				let res = await Common.getAgreements(this.id);
				this.agreementsContent = this.formatterImage(res.data?.content);
			}
		}
	}
	
</script>

<style lang="less" scoped>
	.richImg {
		 max-width: 100%;
		  max-height: 100%;
		  vertical-align: middle;
		  height: auto!important;
		  width: auto!important;
	}
	.base-mine {
		padding: 20rpx 28rpx;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		background: #fff;
		.mine {
			text-indent: 1em;
			color: #000000;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			opacity: 0.5;
			image, img {
				width: 95% !important;
			}
		}
	}
</style>